<div>
<label for="rowsView">Строки</label>
<input type="number" id="rowsView" name="rowsView" min="10" max="28" value="20" onchange="changeRows(event)" class="disabled-sm">
<label for="columnsView">колонки</label>
<input type="number" id="columnsView" name="columnsView" min="10" max="28" value="10" onchange="changeColumns(event)" class="disabled-sm">
<label for="snail">улитка</label>
<input type="checkbox" id="snail" name="snail" oninput="changeSnailMode(event)">
<meter id="speedometer" min="0" low="300" high="450" max="520" optimum="200" value="0"></meter>
<b id="statusView"></b>
<input type="button" value="Обновить" onclick="reload()">
</div>

<div>
<span>Уровень: <b id="levelView"></b>, следующий уровень: <b id="nextLevelView"></b>, счёт: <b id="scoreView"></b></span>
</div>

<div style="display: flex; flex-direction: row; align-items: start; flex-wrap: wrap;">
  <div style="padding: 0 8px 8px 0;">
    <canvas id="container">
      <p>Холст для отображения результатов вычислений</p>
    </canvas>
  </div>
  <div style="padding: 0 8px 8px 0;">
    <canvas id="next">
      <p>Холст для отображения результатов вычислений</p>
    </canvas>
  </div>
  <div style="display: flex; flex-direction: column; align-items: start;">
    <form oninput="changeVolume(event)">
      <div>
        <input type="radio" id="off" name="volume" value="off" checked>
        <label for="off"><b>Плоское изображение</b></label>
        <div style="margin-left: 28px;">
          <span>Прозрачность фигур:</span>
          <div>
            <input type="range" id="alpha" name="alpha" min="0" max="100" step="1" value="0"
                   oninput="oAlpha.value = alpha.valueAsNumber + '%'; changeAlpha(event)">
            <label for="alpha">A</label>
            <output id="oAlpha" name="oAlpha">0%</output>
          </div>
          <span>Поворот игрового поля:</span>
          <div>
            <input type="range" id="rotateX" name="rotateX" min="-90" max="90" value="-1" step="1"
                oninput="rotateXo.value = rotateX.valueAsNumber + '°'; rotate('x',event)">
            <label for="rotateX">X</label>
            <output id="rotateXo" name="rotateXo">-1°</output>
          </div>
          <div>
            <input type="range" id="rotateY" name="rotateY" min="-90" max="90" value="0" step="1"
                oninput="rotateYo.value = rotateY.valueAsNumber + '°'; rotate('y',event)">
            <label for="rotateY">Y</label>
            <output id="rotateYo" name="rotateYo">0°</output>
          </div>
          <div>
            <input type="range" id="rotateZ" name="rotateZ" min="-90" max="90" value="0" step="1"
                oninput="rotateZo.value = rotateZ.valueAsNumber + '°'; rotate('z',event)">
            <label for="rotateZ">Z</label>
            <output id="rotateZo" name="rotateZo">0°</output>
          </div>
        </div>
      </div>
      <div>
        <input type="radio" id="parallel" name="volume" value="parallel">
        <label for="parallel"><b>Параллельная проекция</b></label>
        <div style="margin-left: 28px;">
          <span>Вертикальная корректировка:</span>
          <div>
            <input type="range" id="tv1Y" name="tv1Y" min="0" max="100" value="64" step="1"
                oninput="tv1Yo.value = tv1Y.valueAsNumber; changeTv1(event)">
            <label for="tv1Y">Y</label>
            <output id="tv1Yo" name="tv1Yo">64</output>
          </div>
        </div>
      </div>
      <div>
        <input type="radio" id="perspective" name="volume" value="perspective">
        <label for="perspective"><b>Перспективная проекция</b></label>
        <div style="margin-left: 28px;">
          <span>Центр на экране наблюдателя:</span>
          <div>
            <input type="range" id="tv2X" name="tv2X" min="0" max="300" value="150" step="1"
                oninput="tv2Xo.value = tv2X.valueAsNumber; changeTv2('x',event)">
            <label for="tv2X">X</label>
            <output id="tv2Xo" name="tv2Xo">150</output>
          </div>
          <div>
            <input type="range" id="tv2Y" name="tv2Y" min="0" max="600" value="300" step="1"
                oninput="tv2Yo.value = tv2Y.valueAsNumber; changeTv2('y',event)">
            <label for="tv2Y">Y</label>
            <output id="tv2Yo" name="tv2Yo">300</output>
          </div>
          <div>
            <input type="range" id="tv2Z" name="tv2Z" min="0" max="150" value="64" step="1"
                oninput="tv2Zo.value = tv2Z.valueAsNumber; changeTv2('z',event)">
            <label for="tv2Z">Z</label>
            <output id="tv2Zo" name="tv2Zo">64</output>
          </div>
          <span>Удалённость центра проекции:</span>
          <div>
            <input type="range" id="dist" name="dist" min="200" max="800" value="640" step="10"
                oninput="oDist.value = dist.valueAsNumber; changeDistance2(event);">
            <label for="dist">Z</label>
            <output id="oDist" name="oDist">640</output>
          </div>
          <label for="center">Двигать центральную точку:</label>
          <input type="checkbox" id="center" name="center" oninput="showCenter(event)">
        </div>
      </div>
    </form>
  </div>
</div>
